<template>
  <div class="container">
    <div class="showCont" v-if="showCont && !showTimeOut">
      <div
        class="erweima"
        v-if="cavasSharImg && formData.contract_signing_status == 1"
      >
        <div class="erweimaHead">签约二维码</div>
        <div class="erweimaImg">
          <img :src="cavasSharImg" />
        </div>
        <div class="erweimaTip">签约电子签名时向对方出示此二维码</div>
      </div>
      <div class="formCont">
        <div class="formTitle">
          <div>借款合同信息</div>
          <div
            class="orderStatus blueText"
            v-if="formData.contract_signing_status == 1"
          >
            待签约
          </div>
          <div
            class="orderStatus greenText"
            v-if="formData.contract_signing_status == 2"
          >
            已完成
          </div>
          <div
            class="orderStatus balckText"
            v-if="formData.contract_signing_status == 3"
          >
            已取消
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">合同编号</div>
          <div class="authVal">{{ formData.contract_number }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">借款金额</div>
          <div class="authVal">{{ formData.loan_money }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">还款金额</div>
          <div class="authVal">{{ formData.repayment_money }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">年化利率</div>
          <div class="authVal">{{ formData.interest_rate }}%</div>
        </div>
        <div class="formInput">
          <div class="inputName">借款日期</div>
          <div class="authVal">{{ formData.loan_date }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">还款日期</div>
          <div class="authVal">{{ formData.repayment_date }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">借款用途</div>
          <div class="authVal">{{ formData.loan_use }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">其他说明</div>
          <div class="authVal">
            {{ formData.other_content ? formData.other_content : "无" }}
          </div>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle">
          <div>借款方信息</div>
        </div>
        <div class="formInput">
          <div class="inputName">姓名</div>
          <div class="authVal">
            {{
              checkItemValue(1, "name", "signing_name")
                ? checkItemValue(1, "name", "signing_name")
                : "- -"
            }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">手机号</div>
          <div class="authVal">
            {{
              checkItemValue(1, "mobile", "signing_mobile")
                ? checkItemValue(1, "mobile", "signing_mobile")
                : "- -"
            }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">证件类型</div>
          <div class="authVal">居民身份证</div>
        </div>
        <div class="formInput">
          <div class="inputName">身份证号</div>
          <div class="authVal">
            {{
              checkItemValue(1, "idcard", "signing_idcard")
                ? checkItemValue(1, "idcard", "signing_idcard")
                : "- -"
            }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">电子签名</div>
          <div class="authVal">
            <img
              class="signImg"
              v-if="checkItemValue(1, 'signature', 'signing_signature')"
              :src="checkItemValue(1, 'signature', 'signing_signature')"
            />
            <span v-if="!checkItemValue(1, 'signature', 'signing_signature')"
              >未进行电子签名</span
            >
          </div>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle">
          <div>出借方信息</div>
        </div>
        <div class="formInput">
          <div class="inputName">姓名</div>
          <div class="authVal">
            {{
              checkItemValue(2, "name", "signing_name")
                ? checkItemValue(2, "name", "signing_name")
                : "- -"
            }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">手机号</div>
          <div class="authVal">
            {{
              checkItemValue(2, "mobile", "signing_mobile")
                ? checkItemValue(2, "mobile", "signing_mobile")
                : "- -"
            }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">证件类型</div>
          <div class="authVal">居民身份证</div>
        </div>
        <div class="formInput">
          <div class="inputName">身份证号</div>
          <div class="authVal">
            {{
              checkItemValue(2, "idcard", "signing_idcard")
                ? checkItemValue(2, "idcard", "signing_idcard")
                : "- -"
            }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">电子签名</div>
          <div class="authVal">
            <img
              class="signImg"
              v-if="checkItemValue(2, 'signature', 'signing_signature')"
              :src="checkItemValue(2, 'signature', 'signing_signature')"
            />
            <span v-if="!checkItemValue(2, 'signature', 'signing_signature')"
              >未进行电子签名</span
            >
          </div>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle">
          <div>手续费信息</div>
          <div class="orderStatus redText" v-if="formData.pay_time == '- -'">
            未支付
          </div>
          <div class="orderStatus greenText" v-if="formData.pay_time != '- -'">
            已支付
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">手续费</div>
          <div class="authVal">¥{{ formData.commission_money }}元</div>
        </div>
        <div class="formInput">
          <div class="inputName">支付方式</div>
          <div class="authVal">
            {{ formData.pay_time == "- -" ? "- -" : "微信支付" }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">支付时间</div>
          <div class="authVal">{{ formData.pay_time }}</div>
        </div>
      </div>
      <div
        class="messageCont iconfont icon-24gf-envelopeInfo"
        @click="agreenFn"
        v-if="formData.is_agree == 2"
      ></div>
      <div
        class="ctrlBtn"
        v-if="
          formData.contract_signing_status == 1 ||
          formData.contract_signing_status == 2
        "
      >
        <div class="backBtn iconfont icon-fanhui" @click="backFn"></div>
        <div class="homeBtn plainBtn" v-if="showCancel()" @click="cancelFn">
          取消合同
        </div>
        <div class="homeBtn" @click="bookDetail">查看合同</div>
      </div>
      <div
        class="oneBtn"
        @click="backFn"
        v-if="formData.contract_signing_status == 3"
      >
        返回列表
      </div>
    </div>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import { orderDetails, cancelContract, agreeCancel } from "@/http/api";

import {
  showToast,
  showDialog,
  showConfirmDialog,
  showSuccessToast,
} from "vant";
import QRCode from "qrcode";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { getTimeOut, load },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      formData: {},
      cavasSharImg: "",
    };
  },
  props: {},
  setup() {},
  methods: {
    showCancel() {
      let result = false;
      if (this.formData.contract_signing_status != 3) {
        if (this.formData.cancel_status == 1) {
          result = true;
        }
      }
      return result;
    },
    createErweima() {
      let qrCodeText = this.$apis + "/userlogin?act=id=" + this.$route.query.id;
      this.generateQR(qrCodeText).then((qrImage) => {
        // 可以将二维码图片插入到HTML中，例如插入到一个<img>标签
        this.cavasSharImg = qrImage;
      });
    },
    async generateQR(text) {
      try {
        const opts = {
          errorCorrectionLevel: "H",
          type: "image/png",
          quality: 0.9,
          margin: 1,
        };
        const qrImage = await QRCode.toDataURL(text, opts);
        return qrImage;
      } catch (err) {}
    },
    checkItemValue(type, value, sign_value) {
      let result =
        this.formData.type == type
          ? this.formData[value]
          : this.formData[sign_value];
      return result;
    },
    backFn() {
      this.$router.push({ path: "/order" });
    },
    doAgreen(type) {
      let data = {
        contract_id: this.$route.query.id,
        cancel_status: type,
      };
      agreeCancel(data)
        .then((res) => {
          if (res.data.code == 1) {
            if (type == 3) {
              showSuccessToast("取消成功");
            } else {
              showDialog({
                title: "操作提示",
                confirmButtonText: "我知道了",
                message: "你已成功拒绝借款人发起的合同取消申请",
              }).then(() => {});
            }
          } else {
            showToast(res.data.msg);
          }
          this.getData();
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    agreenFn() {
      showConfirmDialog({
        title: "操作提示",
        confirmButtonText: "同意取消",
        cancelButtonText: "不同意",
        message:
          "对方向你发起了取消此合同，是否同意借款方的申请吗？取消后合同将作废。",
      })
        .then(() => {
          this.doAgreen(3);
        })
        .catch(() => {
          this.doAgreen(4);
        });
    },
    cancelFn() {
      showConfirmDialog({
        title: "取消合同提示",
        confirmButtonText: "取消合同",
        message: "确定取消此合同吗？取消后合同将作废。",
      })
        .then(() => {
          let data = {
            contract_id: this.$route.query.id,
          };
          cancelContract(data)
            .then((res) => {
              if (res.data.code == 1) {
                if (this.formData.is_sf == 1) {
                  if (this.formData.contract_signing_status == 2) {
                    showDialog({
                      title: "温馨提示",
                      confirmButtonText: "我知道了",
                      message: "操作成功，等待对方同意即可完全取消合同",
                    }).then(() => {});
                  } else {
                    showSuccessToast("取消成功");
                  }
                } else {
                  showSuccessToast("取消成功");
                }
              } else {
                showToast(res.data.msg);
              }
              this.getData();
              this.showCont = true;
            })
            .catch(() => {
              this.showTimeOut = true;
              this.showCont = true;
            });
        })
        .catch(() => {});
    },
    bookDetail() {
      if (this.formData.contract_signing_status == 2) {
        this.$router.push({
          path: "/bookDetail",
          query: { id: this.$route.query.id },
        });
      } else {
        showDialog({
          title: "操作提示",
          confirmButtonText: "我知道了",
          message: "当前合同未生效，双方签约后可查看PDF电子合同",
        }).then(() => {});
      }
    },
    detailFn() {
      this.$router.push({
        path: "/detail",
        query: { id: this.formData.project_demand_id },
      });
    },
    getData() {
      let data = {
        contract_id: this.$route.query.id,
      };
      orderDetails(data)
        .then((res) => {
          if (res.data.code == 1) {
            this.formData = res.data.data;
            if (!this.formData.signing_signature) {
              this.createErweima();
            }
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #f3fdfc;
  .showCont {
    padding-top: 1rem;
    padding-bottom: 3.25rem;
    box-sizing: border-box;
  }
  .erweima {
    background-color: #fff;
    width: 92%;
    margin: 0 auto 0.75rem;
    position: relative;
    overflow: hidden;
    padding: 1rem 4%;
    border-radius: 0.25rem;
    box-sizing: border-box;
    .erweimaHead {
      font-size: 0.75rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 0.5rem;
    }
    .erweimaImg {
      text-align: center;
      img {
        width: 60%;
      }
    }
    .erweimaTip {
      text-align: center;
      margin-top: 0.5rem;
      font-size: 0.6rem;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto 0.75rem;
    position: relative;
    overflow: hidden;
    padding: 1rem 4%;
    border-radius: 0.25rem;
    box-sizing: border-box;
    .formTitle {
      font-size: 0.75rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 0.75rem;
      color: #000;
      justify-content: space-between;
      .orderStatus {
        font-size: 0.65rem;
        font-weight: normal;
      }
      .greenText {
        color: #05a165;
      }
      .redText {
        color: #f56c6c;
      }
      .blueText {
        color: #96a1fe;
      }
      .balckText {
        color: #999;
      }
    }
    .hasTop {
      margin-top: 1.25rem;
    }
    .formInput {
      display: flex;
      box-sizing: border-box;
      // align-items: center;
      width: 100%;
      margin-bottom: 0.5rem;
      color: #000;
      line-height: 1rem;
      .inputName {
        width: 3.5rem;
      }
      .authVal {
        flex: 1;
        width: 2rem;
        text-align: right;
        .signImg {
          height: 40px;
        }
      }
    }
  }
  .ctrlBtn {
    width: 100%;
    position: fixed;
    left: 0%;
    bottom: 0rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 4%;
    justify-content: space-between;
    box-sizing: border-box;
    background: #fff;
    .homeBtn,
    .backBtn {
      height: 2rem;
      width: 48%;
      line-height: 2rem;
      border-radius: 0.25rem;
      background-color: #05a165;
      color: white;
      text-align: center;
      font-size: 0.6rem;
    }
    .backBtn {
      width: 2rem;
    }
    .homeBtn {
      flex: 1;
      margin-left: 10px;
    }
    .plainBtn {
      background-color: #fff;
      border: 1px solid #05a165;
      color: #05a165;
    }
  }
  .oneBtn {
    height: 2rem;
    width: 92%;
    line-height: 2rem;
    border-radius: 0.25rem;
    background-color: #05a165;
    color: white;
    text-align: center;
    font-size: 0.6rem;
    position: fixed;
    left: 4%;
    bottom: 0.75rem;
  }
  .messageCont {
    width: 2.5rem;
    height: 2.5rem;
    position: fixed;
    bottom: 2.5rem;
    color: #f56c6c;
    right: 0;
    font-size: 1.5rem;
  }
}
</style>
<style>
.van-text-ellipsis__action {
  color: #05a165;
}
</style>
